<template>
    <!-- 操作成功之后的弹窗 -->
    <div v-if="showDialog" class="dialog-container">
        <div class="dialog-inner">
            <div class="dialog-close" @click="showDialog = false"></div>

            <div class="dialog-icon"></div>
            <p class="dialog-title">
                恭喜您，入驻成功！<br />
                快去电脑上完善信息并上传商品
            </p>

            <p class="dialog-desc">
                http://www.zsdx.cn
                <a href="javascript:;" class="copy-btn" @click="fnCopy"
                    >复制网址</a
                >
            </p>
        </div>
    </div>
</template>

<script>
import Clipboard from 'clipboard'

export default {
    name: 'Dialog',
    props: {
        value: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {}
    },
    computed: {
        showDialog: {
            set(val) {
                this.$emit('input', val)
            },
            get() {
                return this.value
            }
        }
    },
    methods: {
        fnCopy() {
            const clipboard = new Clipboard('.copy-btn', {
                text() {
                    return 'http://www.zsdx.cn'
                }
            })
            clipboard.on('success', (e) => {
                this.$message({
                    text: '复制成功',
                    type: 'success'
                })
                clipboard.destroy()
            })
            clipboard.on('error', (e) => {
                this.$message({
                    text: '复制失败,',
                    type: 'error'
                })
                clipboard.destroy()
            })
        }
    }
}
</script>

<style lang="less" scoped>
.dialog-container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 109;
    transition: 0.3s;
    .dialog-inner {
        width: 5.46rem;
        background: rgba(255, 255, 255, 1);
        border-radius: 0.08rem;
        margin: 0 auto;
        margin-top: 4rem;
        padding: 0.05rem;
        padding-bottom: 0.6rem;
        .dialog-close {
            width: 0.48rem;
            height: 0.48rem;
            margin-right: 0;
            margin-top: 0.2rem;
            margin-left: calc(100% - 0.48rem - 0.2rem);
            background-image: url('//cdn.zsdx.cn/zsdx-website/2020mobile/images/btn-close.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
        }
        .dialog-icon {
            width: 0.96rem;
            height: 0.96rem;
            margin: 0 auto;
            margin-bottom: 0.28rem;
            background-image: url('//cdn.zsdx.cn/zsdx-website/2020mobile/images/upload-success-icon.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
        }
        .dialog-title {
            font-size: 0.28rem;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            line-height: 0.4rem;
            text-align: center;
            padding: 0 0.4rem;
        }

        .dialog-desc {
            font-size: 0.28rem;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            line-height: 0.28rem;
            text-align: center;
            margin-top: 0.24rem;
            a {
                font-size: 0.28rem;
                font-weight: 500;
                color: rgba(32, 160, 255, 1);
                line-height: 0.28rem;
            }
        }
    }
}
</style>
